<div class="p-3 bg-white">
  <h1 class="h3 m-0">Buttons</h1>
</div>
<div class="container-fluid pt-3">
  <div class="row">
    <div class="col-md-6">
      <h4>Buttons</h4>
      <div class="mb-3">
        <button class="btn btn-secondary mb-2">Default</button>
        <button class="btn btn-primary mb-2">Primary</button>
        <button class="btn btn-success mb-2">Success</button>
        <button class="btn btn-info mb-2">Info</button>
        <button class="btn btn-warning mb-2">Warning</button>
        <button class="btn btn-danger mb-2">Danger</button>
      </div>
      <h4>Rounded</h4>
      <div class="mb-3">
        <button class="btn btn-secondary rad-30 mb-2">Default</button>
        <button class="btn btn-primary rad-30  mb-2">Primary</button>
        <button class="btn btn-success rad-30 mb-2">Success</button>
        <button class="btn btn-info rad-30 mb-2">Info</button>
        <button class="btn btn-warning rad-30 mb-2">Warning</button>
        <button class="btn btn-danger rad-30 mb-2">Danger</button>
      </div>
      <h4>Buttons disabled</h4>
      <div class="mb-3">
        <button class="btn btn-secondary disabled mb-2">Default</button>
        <button class="btn btn-primary disabled rad-30 mb-2">Primary</button>
        <button class="btn btn-success disabled mb-2">Success</button>
        <button class="btn btn-info disabled rad-30 mb-2">Info</button>
        <button class="btn btn-warning disabled mb-2">Warning</button>
        <button class="btn btn-danger disabled rad-30 mb-2">Danger</button>
      </div>
      <h4>Line</h4>
      <div class="mb-3">
        <button class="btn btn-outline-secondary mb-2">Default</button>
        <button class="btn btn-outline-primary mb-2">Primary</button>
        <button class="btn btn-outline-success mb-2">Success</button>
        <button class="btn btn-outline-info mb-2">Info</button>
        <button class="btn btn-outline-warning mb-2">Warning</button>
        <button class="btn btn-outline-danger mb-2">Danger</button>
      </div>
      <h4>Line rounded</h4>
      <div class="mb-3">
        <button class="btn btn-outline-secondary rad-30 mr-2  mb-2">Default</button>
        <button class="btn btn-outline-primary rad-30 mb-2">Primary</button>
        <button class="btn btn-outline-success rad-30 mb-2">Success</button>
        <button class="btn btn-outline-info rad-30 mb-2">Info</button>
        <button class="btn btn-outline-warning rad-30 mb-2">Warning</button>
        <button class="btn btn-outline-danger rad-30 mb-2">Danger</button>
      </div>
      <h4>Buttons line disabled</h4>
      <div class="mb-3">
        <button class="btn btn-outline-secondary mb-2 disabled">Default</button>
        <button class="btn btn-outline-primary  rad-30 mb-2 disabled">Primary</button>
        <button class="btn btn-outline-success mb-2 disabled">Success</button>
        <button class="btn btn-outline-info  rad-30 mb-2 disabled">Info</button>
        <button class="btn btn-outline-warning  mb-2 disabled">Warning</button>
        <button class="btn btn-outline-danger  rad-30 mb-2 disabled">Danger</button>
      </div>
      <h4>Button size</h4>
      <div class="mb-3">
        <button class="btn btn-secondary btn-lg">Large</button>
        <button class="btn btn-secondary">Default</button>
        <button class="btn btn-secondary btn-sm">Small</button>
        <button class="btn btn-secondary btn-xs">Extra small</button>
      </div>
      <h4>Button dropdown & dropup</h4>
      <div class="mb-2">
        <div class="btn-group mb-2">
          <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Default</button>
          <div class="dropdown-menu">
            <a href class="dropdown-item">Action</a>
            <a href class="dropdown-item">Another action</a>
            <a href class="dropdown-item">Something else here</a>
            <div class="dropdown-divider"></div>
            <a href class="dropdown-item">Separated link</a>
          </div>
        </div><!-- /btn-group -->
        <div class="btn-group mb-2">
          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary</button>
          <div class="dropdown-menu">
            <a href class="dropdown-item">Action</a>
            <a href class="dropdown-item">Another action</a>
            <a href class="dropdown-item">Something else here</a>
            <div class="dropdown-divider"></div>
            <a href class="dropdown-item">Separated link</a>
          </div>
        </div><!-- /btn-group -->
        <div class="btn-group mb-2">
          <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success</button>
          <div class="dropdown-menu">
            <a href class="dropdown-item">Action</a>
            <a href class="dropdown-item">Another action</a>
            <a href class="dropdown-item">Something else here</a>
            <div class="dropdown-divider"></div>
            <a href class="dropdown-item">Separated link</a>
          </div>
        </div><!-- /btn-group -->
        <div class="btn-group mb-2">
          <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info</button>
          <div class="dropdown-menu">
            <a href class="dropdown-item">Action</a>
            <a href class="dropdown-item">Another action</a>
            <a href class="dropdown-item">Something else here</a>
            <div class="dropdown-divider"></div>
            <a href class="dropdown-item">Separated link</a>
          </div>
        </div><!-- /btn-group -->
        <div class="btn-group mb-2">
          <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning</button>
          <div class="dropdown-menu">
            <a href class="dropdown-item">Action</a>
            <a href class="dropdown-item">Another action</a>
            <a href class="dropdown-item">Something else here</a>
            <div class="dropdown-divider"></div>
            <a href class="dropdown-item">Separated link</a>
          </div>
        </div><!-- /btn-group -->
        <div class="btn-group mb-2">
          <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger</button>
          <div class="dropdown-menu">
            <a href class="dropdown-item">Action</a>
            <a href class="dropdown-item">Another action</a>
            <a href class="dropdown-item">Something else here</a>
            <div class="dropdown-divider"></div>
            <a href class="dropdown-item">Separated link</a>
          </div>
        </div><!-- /btn-group -->
      </div>
      <div class="btn-toolbar mb-2" role="toolbar">
        <div class="btn-group dropup mr-1">
          <button type="button" class="btn btn-secondary">Dropup</button>
          <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"><span class="sr-only">Toggle Dropdown</span></button>
          <div class="dropdown-menu">
            <a href class="dropdown-item">Action</a>
            <a href class="dropdown-item">Another action</a>
            <a href class="dropdown-item">Something else here</a>
            <div class="dropdown-divider"></div>
            <a href class="dropdown-item">Separated link</a>
          </div>
        </div>
        <!-- /btn-group -->
        <div class="btn-group dropup">
          <button type="button" class="btn btn-primary">Right dropup</button>
          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            <span class="sr-only">Toggle Dropdown</span>
          </button>
          <div class="dropdown-menu dropdown-menu-right">
            <a href class="dropdown-item">Action</a>
            <a href class="dropdown-item">Another action</a>
            <a href class="dropdown-item">Something else here</a>
            <div class="dropdown-divider"></div>
            <a href class="dropdown-item">Separated link</a>
          </div>
        </div>
        <!-- /btn-group -->
      </div>
      <h4>Button block</h4>
      <div class="mb-2">
        <a href class="btn btn-secondary block btn-lg mb-2">Block button <i class="fa fa fa-bars"></i></a>
        <a href class="btn btn-outline-primary block mb-2"><i class="fa fa fa-bars"></i> Block button</a>
      </div>
      <h4>Button with icon</h4>
      <div class="mb-3">
        <a href class="btn btn-outline-primary mb-2"><i class="fa fa-envelope-o"></i> Button</a>
        <a href class="btn btn-success rad-30 mb-2"><i class="fa fa-file-text-o"></i> Button</a>
        <a href class="btn btn-danger rad-30 mb-2"><i class="fa fa-tasks"></i> Button</a>
        <a href class="btn btn-outline-primary btn-sm mb-2"><i class="fa fa-envelope-o"></i> Button</a>
        <a href class="btn btn-success rad-30 btn-sm mb-2"><i class="fa fa-file-text-o"></i> Button</a>
        <a href class="btn btn-danger rad-30 btn-sm mb-2"><i class="fa fa-tasks"></i> Button</a>
      </div>
      <h4>Button social</h4>
      <div class="mb-2">
        <a href class="btn bg-facebook text-white rad-30 btn-icon"><i class="fa fa-facebook"></i></a>
        <a href class="btn bg-twitter text-white rad-30 btn-icon"><i class="fa fa-twitter"></i></a>
        <a href class="btn bg-googleplus text-white rad-30 btn-icon"><i class="fa fa-google-plus"></i></a>
        <a href class="btn bg-dribbble text-white rad-30 btn-icon"><i class="fa fa-dribbble"></i></a>
        <a href class="btn bg-linkedin text-white rad-30 btn-icon"><i class="fa fa-linkedin"></i></a>
      </div>
    </div>
    <div class="col-md-6">
      <h4>Button group</h4>
      <div class="mb-3">
        <div class="btn-group mb-2">
          <button type="button" class="btn btn-secondary">Left</button>
          <button type="button" class="btn btn-secondary">Middle</button>
          <button type="button" class="btn btn-secondary">Right</button>
        </div>
        <div class="btn-group mb-2">
          <button type="button" class="btn btn-outline-primary">Left</button>
          <button type="button" class="btn btn-outline-primary">Middle</button>
          <button type="button" class="btn btn-outline-primary">Right</button>
        </div>
        <div class="btn-group mb-2">
          <button type="button" class="btn btn-outline-primary rounded">Left</button>
          <button type="button" class="btn btn-outline-primary rounded">Middle</button>
          <button type="button" class="btn btn-outline-primary rounded">Right</button>
        </div>
      </div>
      <h4>Button toolbar</h4>
      <div class="mb-2">
        <div>
          <div>
            <div class="btn-toolbar mb-2" role="toolbar" style="margin: 0;">
              <div class="btn-group">
                <button type="button" class="btn btn-secondary">1</button>
                <button type="button" class="btn btn-secondary">2</button>
                <button type="button" class="btn btn-secondary">3</button>
                <button type="button" class="btn btn-secondary">4</button>
              </div>
              <div class="btn-group">
                <button type="button" class="btn btn-secondary">5</button>
                <button type="button" class="btn btn-secondary">6</button>
                <button type="button" class="btn btn-secondary">7</button>
              </div>
              <div class="btn-group">
                <button type="button" class="btn btn-secondary">8</button>
              </div>
            </div>
          </div>
          <div>
            <div class="btn-toolbar mb-2" role="toolbar" style="margin: 0;">
              <div class="btn-group">
                <button type="button" class="btn btn-outline-primary rounded">1</button>
                <button type="button" class="btn btn-outline-primary rounded">2</button>
                <button type="button" class="btn btn-outline-primary rounded">3</button>
                <button type="button" class="btn btn-outline-primary rounded">4</button>
              </div>
              <div class="btn-group">
                <button type="button" class="btn btn-outline-primary rounded">5</button>
                <button type="button" class="btn btn-outline-primary rounded">6</button>
                <button type="button" class="btn btn-outline-primary rounded">7</button>
              </div>
              <div class="btn-group">
                <button type="button" class="btn btn-outline-primary rounded">8</button>
              </div>
            </div>
          </div>
          <div>
            <div class="btn-toolbar mb-2" role="toolbar" style="margin: 0;">
              <div class="btn-group">
                <button type="button" class="btn btn-secondary btn-sm">1</button>
                <button type="button" class="btn btn-secondary btn-sm">2</button>
                <button type="button" class="btn btn-secondary btn-sm">3</button>
                <button type="button" class="btn btn-secondary btn-sm">4</button>
              </div>
              <div class="btn-group">
                <button type="button" class="btn btn-secondary btn-sm">5</button>
                <button type="button" class="btn btn-secondary btn-sm">6</button>
                <button type="button" class="btn btn-secondary btn-sm">7</button>
              </div>
              <div class="btn-group">
                <button type="button" class="btn btn-secondary btn-sm">8</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <h4>Button nesting</h4>
      <div class="mb-2">
        <div class="btn-group">
          <button type="button" class="btn btn-secondary">1</button>
          <button type="button" class="btn btn-secondary">2</button>
          <div class="btn-group">
            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
            <div class="dropdown-menu">
              <a href class="dropdown-item">Action</a>
              <a href class="dropdown-item">Another action</a>
              <a href class="dropdown-item">Something else here</a>
              <div class="dropdown-divider"></div>
              <a href class="dropdown-item">Separated link</a>
            </div>
          </div>
        </div>
        <div class="btn-group">
          <button type="button" class="btn btn-outline-success rounded">1</button>
          <button type="button" class="btn btn-outline-success rounded">2</button>
          <div class="btn-group">
            <button type="button" class="btn btn-outline-success rad-30 dropdown-toggle" data-toggle="dropdown">Dropdown</button>
            <div class="dropdown-menu">
              <a href class="dropdown-item">Action</a>
              <a href class="dropdown-item">Another action</a>
              <a href class="dropdown-item">Something else here</a>
              <div class="dropdown-divider"></div>
              <a href class="dropdown-item">Separated link</a>
            </div>
          </div>
        </div>
      </div>
      <h4>Button vertical</h4>
      <div class="mb-2">
        <div class="btn-group-vertical">
          <button type="button" class="btn btn-secondary">Button</button>
          <button type="button" class="btn btn-secondary">Button</button>
          <div class="btn-group">
            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
            <div class="dropdown-menu">
              <a href class="dropdown-item">Action</a>
              <a href class="dropdown-item">Another action</a>
              <a href class="dropdown-item">Something else here</a>
              <div class="dropdown-divider"></div>
              <a href class="dropdown-item">Separated link</a>
            </div>
          </div>
          <button type="button" class="btn btn-secondary">Button</button>
          <button type="button" class="btn btn-secondary">Button</button>
          <div class="btn-group">
            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
            <div class="dropdown-menu">
              <a href class="dropdown-item">Action</a>
              <a href class="dropdown-item">Another action</a>
              <a href class="dropdown-item">Something else here</a>
              <div class="dropdown-divider"></div>
              <a href class="dropdown-item">Separated link</a>
            </div>
          </div>
          <div class="btn-group">
            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
            <div class="dropdown-menu">
              <a href class="dropdown-item">Action</a>
              <a href class="dropdown-item">Another action</a>
              <a href class="dropdown-item">Something else here</a>
              <div class="dropdown-divider"></div>
              <a href class="dropdown-item">Separated link</a>
            </div>
          </div>
          <div class="btn-group">
            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
            <div class="dropdown-menu">
              <a href class="dropdown-item">Action</a>
              <a href class="dropdown-item">Another action</a>
              <a href class="dropdown-item">Something else here</a>
              <div class="dropdown-divider"></div>
              <a href class="dropdown-item">Separated link</a>
            </div>
          </div>
        </div>

        <div class="btn-group-vertical">
          <button type="button" class="btn btn-outline-primary btn-sm">Button</button>
          <button type="button" class="btn btn-outline-primary btn-sm">Button</button>
          <div class="btn-group">
            <button type="button" class="btn btn-outline-primary btn-sm dropdown-toggle" data-toggle="dropdown">Dropdown</button>
            <div class="dropdown-menu">
              <a href class="dropdown-item">Action</a>
              <a href class="dropdown-item">Another action</a>
              <a href class="dropdown-item">Something else here</a>
              <div class="dropdown-divider"></div>
              <a href class="dropdown-item">Separated link</a>
            </div>
          </div>
          <button type="button" class="btn btn-outline-primary btn-sm">Button</button>
          <button type="button" class="btn btn-outline-primary btn-sm">Button</button>
          <div class="btn-group">
            <button type="button" class="btn btn-outline-primary btn-sm dropdown-toggle" data-toggle="dropdown">Dropdown</button>
            <div class="dropdown-menu">
              <a href class="dropdown-item">Action</a>
              <a href class="dropdown-item">Another action</a>
              <a href class="dropdown-item">Something else here</a>
              <div class="dropdown-divider"></div>
              <a href class="dropdown-item">Separated link</a>
            </div>
          </div>
          <div class="btn-group">
            <button type="button" class="btn btn-outline-primary btn-sm dropdown-toggle" data-toggle="dropdown">Dropdown</button>
            <div class="dropdown-menu">
              <a href class="dropdown-item">Action</a>
              <a href class="dropdown-item">Another action</a>
              <a href class="dropdown-item">Something else here</a>
              <div class="dropdown-divider"></div>
              <a href class="dropdown-item">Separated link</a>
            </div>
          </div>
          <div class="btn-group">
            <button type="button" class="btn btn-outline-primary btn-sm dropdown-toggle" data-toggle="dropdown">Dropdown</button>
            <div class="dropdown-menu">
              <a href class="dropdown-item">Action</a>
              <a href class="dropdown-item">Another action</a>
              <a href class="dropdown-item">Something else here</a>
              <div class="dropdown-divider"></div>
              <a href class="dropdown-item">Separated link</a>
            </div>
          </div>
        </div>
      </div>
      <h4>Button justified</h4>
      <div class="mb-2">
        <div class="btn-group btn-group-justified">
          <a href class="btn btn-secondary">Left</a>
          <a href class="btn btn-secondary">Middle</a>
          <a href class="btn btn-secondary">Right</a>
        </div>
        <div class="btn-group btn-group-justified">
          <a href class="btn btn-primary">Left</a>
          <a href class="btn btn-success">Middle</a>
          <a href class="btn btn-warning">Right</a>
        </div>
        <div class="btn-group btn-group-justified">
          <a href class="btn btn-outline-primary">Left</a>
          <a href class="btn btn-outline-primary">Middle</a>
          <div class="btn-group">
            <span class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown">Dropdown</span>
            <div class="dropdown-menu dropdown-menu-right">
              <a href class="dropdown-item">Action</a>
              <a href class="dropdown-item">Another action</a>
              <a href class="dropdown-item">Something else here</a>
              <div class="dropdown-divider"></div>
              <a href class="dropdown-item">Separated link</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
